<% layout('/layouts/default.html', {title: '我的首页'}){ %>
<link rel="stylesheet" href="${ctxStatic}/css/tangdao.dashboard.css">
<div class="content-body">
    <div class="container-fluid">
        <div class="d-sm-flex align-items-center justify-content-between mg-b-20 mg-lg-b-25 mg-xl-b-30">
            <div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-style1 mg-b-10">
                        <li class="breadcrumb-item"><a href="#">控制台</a></li>
                        <li class="breadcrumb-item active" aria-current="page">系统概况信息</li>
                    </ol>
                </nav>
                <h4 class="mg-b-0 tx-spacing--1">欢迎来到工作台</h4>
            </div>
            <div class="d-none d-md-block">
                <button class="btn btn-sm pd-x-10 btn-white btn-uppercase"><i data-feather="mail"
                        class="wd-10 mg-r-5"></i> 任务</button>
                <button class="btn btn-sm pd-x-10 btn-white btn-uppercase mg-l-5"><i data-feather="printer"
                        class="wd-10 mg-r-5"></i> 监控</button>
                <button class="btn btn-sm pd-x-10 btn-primary btn-uppercase mg-l-5"><i data-feather="file"
                        class="wd-10 mg-r-5"></i> 财务报告</button>
            </div>
        </div>

        <div class="row row-xs">
            <div class="col-sm-6 col-lg-3">
                <div class="card card-body">
                    <h6 class="tx-uppercase tx-11 tx-spacing-1 tx-color-02 tx-semibold mg-b-8">用户同比率</h6>
                    <div class="d-flex d-lg-block d-xl-flex align-items-end">
                        <h3 class="tx-normal tx-rubik mg-b-0 mg-r-5 lh-1">0.81%</h3>
                        <p class="tx-11 tx-color-03 mg-b-0"><span class="tx-medium tx-success">1.2% <i
                                    class="icon ion-md-arrow-up"></i></span> 上月同比</p>
                    </div>
                    <div class="chart-three">
                        <div id="flotChart3" class="flot-chart ht-30"></div>
                    </div><!-- chart-three -->
                </div>
            </div><!-- col -->
            <div class="col-sm-6 col-lg-3 mg-t-10 mg-sm-t-0">
                <div class="card card-body">
                    <h6 class="tx-uppercase tx-11 tx-spacing-1 tx-color-02 tx-semibold mg-b-8">任务中签率</h6>
                    <div class="d-flex d-lg-block d-xl-flex align-items-end">
                        <h3 class="tx-normal tx-rubik mg-b-0 mg-r-5 lh-1">3,137</h3>
                        <p class="tx-11 tx-color-03 mg-b-0"><span class="tx-medium tx-danger">0.7% <i
                                    class="icon ion-md-arrow-down"></i></span> 上周同比</p>
                    </div>
                    <div class="chart-three">
                        <div id="flotChart4" class="flot-chart ht-30"></div>
                    </div><!-- chart-three -->
                </div>
            </div><!-- col -->
            <div class="col-sm-6 col-lg-3 mg-t-10 mg-lg-t-0">
                <div class="card card-body">
                    <h6 class="tx-uppercase tx-11 tx-spacing-1 tx-color-02 tx-semibold mg-b-8">下发率</h6>
                    <div class="d-flex d-lg-block d-xl-flex align-items-end">
                        <h3 class="tx-normal tx-rubik mg-b-0 mg-r-5 lh-1">$306.20</h3>
                        <p class="tx-11 tx-color-03 mg-b-0"><span class="tx-medium tx-danger">0.3% <i
                                    class="icon ion-md-arrow-down"></i></span> 上月同比</p>
                    </div>
                    <div class="chart-three">
                        <div id="flotChart5" class="flot-chart ht-30"></div>
                    </div><!-- chart-three -->
                </div>
            </div><!-- col -->
            <div class="col-sm-6 col-lg-3 mg-t-10 mg-lg-t-0">
                <div class="card card-body">
                    <h6 class="tx-uppercase tx-11 tx-spacing-1 tx-color-02 tx-semibold mg-b-8">成功率</h6>
                    <div class="d-flex d-lg-block d-xl-flex align-items-end">
                        <h3 class="tx-normal tx-rubik mg-b-0 mg-r-5 lh-1">1,650</h3>
                        <p class="tx-11 tx-color-03 mg-b-0"><span class="tx-medium tx-success">2.1% <i
                                    class="icon ion-md-arrow-up"></i></span> 上月同比</p>
                    </div>
                    <div class="chart-three">
                        <div id="flotChart6" class="flot-chart ht-30"></div>
                    </div><!-- chart-three -->
                </div>
            </div><!-- col -->
            <div class="col-lg-8 col-xl-7 mg-t-10">
                <div class="card">
                    <div class="card-header pd-y-20 d-md-flex align-items-center justify-content-between">
                        <h6 class="mg-b-0">账户每月的发送与成功率分析对比</h6>
                        <ul class="list-inline d-flex mg-t-20 mg-sm-t-10 mg-md-t-0 mg-b-0">
                            <li class="list-inline-item d-flex align-items-center">
                                <span class="d-block wd-10 ht-10 bg-df-1 rounded mg-r-5"></span>
                                <span class="tx-sans tx-uppercase tx-10 tx-medium tx-color-03">发送量和</span>
                            </li>
                            <li class="list-inline-item d-flex align-items-center mg-l-5">
                                <span class="d-block wd-10 ht-10 bg-df-2 rounded mg-r-5"></span>
                                <span class="tx-sans tx-uppercase tx-10 tx-medium tx-color-03">成功量</span>
                            </li>
                            <li class="list-inline-item d-flex align-items-center mg-l-5">
                                <span class="d-block wd-10 ht-10 bg-df-3 rounded mg-r-5"></span>
                                <span class="tx-sans tx-uppercase tx-10 tx-medium tx-color-03">同比</span>
                            </li>
                        </ul>
                    </div><!-- card-header -->
                    <div class="card-body pos-relative pd-0">
                        <div class="pos-absolute t-20 l-20 wd-xl-100p z-index-10">
                            <div class="row">
                                <div class="col-sm-5">
                                    <h3 class="tx-normal tx-rubik tx-spacing--2 mg-b-5">20,076,250</h3>
                                    <h6 class="tx-uppercase tx-11 tx-spacing-1 tx-color-02 tx-semibold mg-b-10">本月发送量和</h6>
                                    <p class="mg-b-0 tx-12 tx-color-03">据统计本月移动通道相对稳定，电信通道略有波动。联通通道保有发送稳定。 <a href="">查看分析</a></p>
                                </div><!-- col -->
                                <div class="col-sm-5 mg-t-20 mg-sm-t-0">
                                    <h3 class="tx-normal tx-rubik tx-spacing--2 mg-b-5">18,093,222</h3>
                                    <h6 class="tx-uppercase tx-11 tx-spacing-1 tx-color-02 tx-semibold mg-b-10">本月成功量</h6>
                                    <p class="mg-b-0 tx-12 tx-color-03">The revenue generated per account on a
                                        monthly or yearly basis. <a href="">Learn More</a></p>
                                </div><!-- col -->
                            </div><!-- row -->
                        </div>

                        <div class="chart-one">
                            <div id="flotChart" class="flot-chart"></div>
                        </div><!-- chart-one -->
                    </div><!-- card-body -->
                </div><!-- card -->
            </div>
            <div class="col-lg-4 col-xl-5 mg-t-10">
                <div class="card">
                    <div class="card-header pd-t-20 pd-b-0 bd-b-0">
                        <h6 class="mg-b-5">账户财务状况</h6>
                        <p class="tx-12 tx-color-03 mg-b-0">发送财务变动相关的客户数。</p>
                    </div><!-- card-header -->
                    <div class="card-body pd-20">
                        <div class="chart-two mg-b-20">
                            <div id="flotChart2" class="flot-chart"></div>
                        </div><!-- chart-two -->
                        <div class="row">
                            <div class="col-sm">
                                <h4 class="tx-normal tx-rubik tx-spacing--1 mg-b-5">$1,680<small>.50</small></h4>
                                <p class="tx-11 tx-uppercase tx-spacing-1 tx-semibold mg-b-10 tx-primary">本月变动的金额数
                                </p>
                                <div class="tx-12 tx-color-03">Customers who have upgraded the level of your
                                    products or service.</div>
                            </div><!-- col -->
                            <div class="col-sm mg-t-20 mg-sm-t-0">
                                <h4 class="tx-normal tx-rubik tx-spacing--1 mg-b-5">$1,520<small>.00</small></h4>
                                <p class="tx-11 tx-uppercase tx-spacing-1 tx-semibold mg-b-10 tx-pink">未变动的金额数
                                </p>
                                <div class="tx-12 tx-color-03">Customers who have ended their subscription with you.
                                </div>
                            </div><!-- col -->
                        </div><!-- row -->
                    </div><!-- card-body -->
                </div><!-- card -->
            </div>
            
        </div>
    </div><!-- container -->
</div><!-- content -->
<% include('/include/footer.html'){} %>
<% } %>
<script src="${ctxStatic}/vendors/jquery.flot/jquery.flot.js"></script>
<script src="${ctxStatic}/vendors/jquery.flot/jquery.flot.stack.js"></script>
<script src="${ctxStatic}/vendors/jquery.flot/jquery.flot.resize.js"></script>
<script src="${ctxStatic}/tangdao.sampledata.js"></script>
<script>
$(function () {
    'use strict'

    var plot = $.plot('#flotChart', [{
        data: df3,
        color: '#69b2f8'
    }, {
        data: df1,
        color: '#d1e6fa'
    }, {
        data: df2,
        color: '#d1e6fa',
        lines: {
            fill: false,
            lineWidth: 1.5
        }
    }], {
            series: {
                stack: 0,
                shadowSize: 0,
                lines: {
                    show: true,
                    lineWidth: 0,
                    fill: 1
                }
            },
            grid: {
                borderWidth: 0,
                aboveData: true
            },
            yaxis: {
                show: false,
                min: 0,
                max: 350
            },
            xaxis: {
                show: true,
                ticks: [[0, ''], [8, 'Jan'], [20, 'Feb'], [32, 'Mar'], [44, 'Apr'], [56, 'May'], [68, 'Jun'], [80, 'Jul'], [92, 'Aug'], [104, 'Sep'], [116, 'Oct'], [128, 'Nov'], [140, 'Dec']],
                color: 'rgba(255,255,255,.2)'
            }
        });


    $.plot('#flotChart2', [{
        data: [[0, 55], [1, 38], [2, 20], [3, 70], [4, 50], [5, 15], [6, 30], [7, 50], [8, 40], [9, 55], [10, 60], [11, 40], [12, 32], [13, 17], [14, 28], [15, 36], [16, 53], [17, 66], [18, 58], [19, 46]],
        color: '#69b2f8'
    }, {
        data: [[0, 80], [1, 80], [2, 80], [3, 80], [4, 80], [5, 80], [6, 80], [7, 80], [8, 80], [9, 80], [10, 80], [11, 80], [12, 80], [13, 80], [14, 80], [15, 80], [16, 80], [17, 80], [18, 80], [19, 80]],
        color: '#f0f1f5'
    }], {
            series: {
                stack: 0,
                bars: {
                    show: true,
                    lineWidth: 0,
                    barWidth: .5,
                    fill: 1
                }
            },
            grid: {
                borderWidth: 0,
                borderColor: '#edeff6'
            },
            yaxis: {
                show: false,
                max: 80
            },
            xaxis: {
                ticks: [[0, 'Jan'], [4, 'Feb'], [8, 'Mar'], [12, 'Apr'], [16, 'May'], [19, 'Jun']],
                color: '#fff',
            }
        });

    $.plot('#flotChart3', [{
        data: df4,
        color: '#9db2c6'
    }], {
            series: {
                shadowSize: 0,
                lines: {
                    show: true,
                    lineWidth: 2,
                    fill: true,
                    fillColor: { colors: [{ opacity: 0 }, { opacity: .5 }] }
                }
            },
            grid: {
                borderWidth: 0,
                labelMargin: 0
            },
            yaxis: {
                show: false,
                min: 0,
                max: 60
            },
            xaxis: { show: false }
        });

    $.plot('#flotChart4', [{
        data: df5,
        color: '#9db2c6'
    }], {
            series: {
                shadowSize: 0,
                lines: {
                    show: true,
                    lineWidth: 2,
                    fill: true,
                    fillColor: { colors: [{ opacity: 0 }, { opacity: .5 }] }
                }
            },
            grid: {
                borderWidth: 0,
                labelMargin: 0
            },
            yaxis: {
                show: false,
                min: 0,
                max: 80
            },
            xaxis: { show: false }
        });

    $.plot('#flotChart5', [{
        data: df6,
        color: '#9db2c6'
    }], {
            series: {
                shadowSize: 0,
                lines: {
                    show: true,
                    lineWidth: 2,
                    fill: true,
                    fillColor: { colors: [{ opacity: 0 }, { opacity: .5 }] }
                }
            },
            grid: {
                borderWidth: 0,
                labelMargin: 0
            },
            yaxis: {
                show: false,
                min: 0,
                max: 80
            },
            xaxis: { show: false }
        });

    $.plot('#flotChart6', [{
        data: df4,
        color: '#9db2c6'
    }], {
            series: {
                shadowSize: 0,
                lines: {
                    show: true,
                    lineWidth: 2,
                    fill: true,
                    fillColor: { colors: [{ opacity: 0 }, { opacity: .5 }] }
                }
            },
            grid: {
                borderWidth: 0,
                labelMargin: 0
            },
            yaxis: {
                show: false,
                min: 0,
                max: 60
            },
            xaxis: { show: false }
        });

    //   $('#vmap').vectorMap({
    //     map: 'usa_en',
    //     showTooltip: true,
    //     backgroundColor: '#fff',
    //     color: '#d1e6fa',
    //     colors: {
    //       fl: '#69b2f8',
    //       ca: '#69b2f8',
    //       tx: '#69b2f8',
    //       wy: '#69b2f8',
    //       ny: '#69b2f8'
    //     },
    //     selectedColor: '#00cccc',
    //     enableZoom: false,
    //     borderWidth: 1,
    //     borderColor: '#fff',
    //     hoverOpacity: .85
    //   });


    //   var ctxLabel = ['6am', '10am', '1pm', '4pm', '7pm', '10pm'];
    //   var ctxData1 = [20, 60, 50, 45, 50, 60];
    //   var ctxData2 = [10, 40, 30, 40, 55, 25];

    //   // Bar chart
    //   var ctx1 = document.getElementById('chartBar1').getContext('2d');
    //   new Chart(ctx1, {
    //     type: 'horizontalBar',
    //     data: {
    //       labels: ctxLabel,
    //       datasets: [{
    //         data: ctxData1,
    //         backgroundColor: '#69b2f8'
    //       }, {
    //         data: ctxData2,
    //         backgroundColor: '#d1e6fa'
    //       }]
    //     },
    //     options: {
    //       maintainAspectRatio: false,
    //       responsive: true,
    //       legend: {
    //         display: false,
    //         labels: {
    //           display: false
    //         }
    //       },
    //       scales: {
    //         yAxes: [{
    //           gridLines: {
    //             display: false
    //           },
    //           ticks: {
    //             display: false,
    //             beginAtZero: true,
    //             fontSize: 10,
    //             fontColor: '#182b49'
    //           }
    //         }],
    //         xAxes: [{
    //           gridLines: {
    //             display: true,
    //             color: '#eceef4'
    //           },
    //           barPercentage: 0.6,
    //           ticks: {
    //             beginAtZero: true,
    //             fontSize: 10,
    //             fontColor: '#8392a5',
    //             max: 80
    //           }
    //         }]
    //       }
    //     }
    //   });

})
</script>
</body></html>